import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class HorizonalDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('水平控件示例'),
        centerTitle: true,
      ),
      body: Container(
        /**
         * fromLTRB(double left, double top, double right, double
         *  bottom)：分别指定四个方向的填充。
         *  all(double value) : 所有方向均使用相同数值的填充。
         *  only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
         *  symmetric({vertical, horizontal})：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
         */
        margin: EdgeInsets.symmetric(vertical: 20.0),
        height: 200.0,
        child: ListView(
          //水平滚动
          scrollDirection: Axis.horizontal,
          children: <Widget>[
            Container(
              width: 160.00,
              color: Colors.lightBlue,
            ),
            Container(
              width: 160.00,
              color: Colors.pink,
              child: Text(
                '粉红',
                style: TextStyle(color: Colors.white),
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              width: 160.00,
              height: 200.00,
              color: Colors.white,
              child: Text(
                '白色',
                style: TextStyle(color: Colors.black),
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              width: 160.00,
              color: Colors.orange,
              child: Text(
                '橘色',
                style: TextStyle(color: Colors.white),
                textAlign: TextAlign.center,
              ),
            ),
            Container(
              width: 160.00,
              color: Colors.deepPurple,
              child: Text(
                '紫色',
                style: TextStyle(color: Colors.white),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}
